<template>
	<view>
		<video id="myVideo" class="myVideo" :src="videoSrc" v-show="isPlayVideo" :show-fullscreen-btn="showFullscreenBtn" :direction="videoDirection" :show-play-btn="showPlayBtn" @pause="videoPause" @fullscreenchange="viderFullscreen">
			<cover-image class="stopPlayVideoBtn" @click="stopPlayVideo" src="/static/img/close.png"></cover-image>
		</video>
		<view class="content">
			<view class="label">
				<view v-for="(label,index) in labelList" :class="{'on':index==labelIndex}" @tap="loadData(index)" :key="index">
					{{label.title}}({{label.count}})
				</view>
			</view>
			<view class="list">
				<view class="row" v-for="(row,Rindex) in ratingsList" :key="Rindex">
					<view class="left">
						<view class="face">
							<xy-image :src="row.userInfo.avatar"></xy-image>
						</view>
					</view>
					<view class="right">
						<view class="name-date">
							<view class="username">
								{{row.userInfo.nickname}}
							</view>
							<view class="date">
								{{row.createTime | formatTime}}
							</view>
						</view>
						<view class="spec">
							{{row.skuSpec}}
						</view>
						<view class="first">
							<view class="rat">
								{{row.content}}
							</view>
							<view class="img-video">
								<view class="box" v-for="item in row.videos" @tap="playVideo(item.url)" :key="item.url">
									<xy-image mode="aspectFill" :src="item.cover"></xy-image>
									<view class="playbtn">
										<view class="icon bofang"></view>
									</view>
								</view>
								<view class="box" v-for="item in row.images" @tap="showBigImg(item.url, row.images)" :key="item.url">
									<xy-image mode="aspectFill" :src="item.url"></xy-image>
								</view>
							</view>
						</view>
						<view class="append" v-if="row.append">
							<view class="date">
								{{row.append ? row.append.createTime : ''| formatTime}}
							</view>
							<view class="rat">
								{{row.append.content}}
							</view>
							<view class="img-video">
								<view class="box" v-for="item in row.append.videos" @tap="playVideo(item.url)" :key="item.url">
									<xy-image mode="aspectFill" :src="item.cover"></xy-image>
									<view class="playbtn">
										<view class="icon bofang"></view>
									</view>
								</view>
								<view class="box" v-for="item in row.append.images" @tap="showBigImg(item.url,row.append.images)" :key="item.url">
									<xy-image mode="aspectFill" :src="item.url"></xy-image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemId: 0,
				page: 1,
				labelList:[
					{
						name: 'all',
						title: '全部',
						count: 0,
					}
				],
				labelIndex: 0,
				ratingsList:[],
				videoDirection:0,
				showFullscreenBtn:true,
				showPlayBtn:true,
				isPlayVideo:true,
				videoSrc:''

			};
		},
		onReady: function (res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad(options) {
			this.itemId = options.itemId;
			this.loadData(0);
		},
		// 下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			this.page = 1;
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
			this.loadData(this.labelIndex);
		},
		// 上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			if (this.labelList[this.labelIndex].count <= this.ratingsList.length()) {
				return;
			}
			this.page++;
			this.loadData(this.labelIndex);
		},
		methods: {
			async loadData(index){
				let type = this.labelList[index].name;
				let res = await this.util.request({
					url: '/v1/ishop/comment/lists?itemId=' + this.itemId + '&type=' + type,
					method: 'get',
					data: {
						page: this.page
					}
				});
				console.log(res);
				if (res.code == 200) {
					this.labelList = res.data.tabList;
					if (this.page == 1 || this.labelIndex != index) {
						this.ratingsList = res.data.dataList;
					} else {
						this.ratingsList = Object.assign(this.ratingsList, res.data.dataList);
					}
				} else {
					this.util.showToast({
						title: res.msg,
						icon: 'loading',
						duration: 1500
					});
				}
				this.labelIndex = index;
			},
			playVideo(path) {
				this.videoSrc = path;
				// this.isPlayVideo = true;
				this.$nextTick(function() {
					this.videoContext.requestFullScreen({direction:0});
				});
			},
			stopPlayVideo(){
				this.videoContext.pause();
			},
			videoPause(){
				// this.isPlayVideo = false;
				this.videoSrc = '';
			}, 
			viderFullscreen(e){
				if(e.detail.fullScreen){
					this.videoContext.play();
				}else{
					this.stopPlayVideo();
				}
			},
			showBigImg(src,srclist){
				uni.previewImage({
					current:src,
					urls: [src]
				});
			}
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}

.myVideo{
	position: fixed;
	top: 50%;
	right: 100%;
}
.content{
	view{
		display: flex;
	}
	width: 94%;
	padding: 0 3%;
	
	.label{
		width: 100%;
		flex-wrap:wrap;
		view{
			padding: 0 20upx;
			height: 50upx;
			border-radius: 40upx;
			border:solid 1upx #ddd;
			align-items: center;
			color: #555;
			font-size: 26upx;
			background-color: #f9f9f9;
			margin: 10upx 20upx 10upx 0;
			&.on{
				border:solid 1upx #f06c7a;
				color: #f06c7a;
			}
		}
	}
	.list{
		width: 100%;
		flex-wrap: wrap;
		padding: 20upx 0;
		.row{
			width: 100%;
			margin-top: 30upx;
			.left{
				width: 10vw;
				flex-shrink: 0;
				margin-right: 10upx;
				.face{
					width: 100%;
					image{
						width: 10vw;
						height: 10vw;
						border-radius: 100%;
					}
					
				}
			}
			.right{
				width: 100%;
				flex-wrap: wrap;
				.name-date{
					width: 100%;
					justify-content: space-between;
					align-items: baseline;
					.username{
						font-size: 32upx;
						color: #555;
					}
					.date{
						font-size:28upx;
						color: #aaa;
					}
				}
				.spec{
					width: 100%;
					color: #aaa;
					font-size: 26upx;
				}
				.first{
					width: 100%;
					flex-wrap: wrap;
					.rat{
						font-size: 30upx;
					}
					.img-video{
						width: 100%;
						flex-wrap: wrap;
						.box{
							width: calc((84.6vw - 50upx)/4);
							height: calc((84.6vw - 50upx)/4);
							margin: 5upx 5upx;
							position: relative;
							justify-content: center;
							align-items: center;
							image{
								position: absolute;
								width: 100%;
								height: 100%;
								border-radius: 10upx;
							}
							.playbtn{
								position: absolute;
								.icon{
									font-size: 80upx;
									color: rgba(255,255,255,.9)
								}
							}
						}
					}
				}
				
				.append{
					width: 100%;
					flex-wrap: wrap;
					.date{
						width: 100%;
						height: 40upx;
						border-left: 10upx solid #f06c7a;
						padding-left: 10upx;
						align-items: center;
						font-size: 32upx;
						margin: 20upx 0;
					}
					.rat{
						font-size: 30upx;
					}
					.img-video{
						width: 100%;
						flex-wrap: wrap;
						.box{
							width: calc((84.6vw - 10upx - (10upx * 4))/4);
							height: calc((84.6vw - 10upx - (10upx * 4))/4);
							margin: 5upx 5upx;
							position: relative;
							justify-content: center;
							align-items: center;
							image{
								position: absolute;
								width: 100%;
								height: 100%;
								border-radius: 10upx;
							}
							.playbtn{
								position: absolute;
								.icon{
									font-size: 80upx;
									color: rgba(255,255,255,.9);
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
